/**
 * 业务中用到的颜色以及字体、层级关系、间距等都从此变量文件中获取，不要直接在业务中存在css变量的使用
 */
// ------ Font 字体 --------
$font-family: "-apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Helvetica Neue","Arial","Noto Sans","Liberation Sans","sans-serif","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

$font-size-small: 12px;
$font-size-base: 14px;
$font-size-middle: 16px;
$font-size-middle-extra: 18px;
$font-size-large: 20px;
$font-size-label: $font-size-small;
$font-size-primary: $font-size-base;
$font-size-h1: 26px;
$font-size-h2: 24px;
$font-size-h3: 22px;
$font-size-h4: $font-size-large;
$font-size-h5: $font-size-middle-extra;
$font-size-h6: $font-size-middle;

$font-line-height-xs: 18px;
$font-line-height-small: 22px;
$font-line-height-base: 24px;
$font-line-height-middle: 26px;
$font-line-height-large: 30px;
$font-line-height-primary: $font-line-height-base;

$font-weight-light: 400;
$font-weight-regular: 600;
$font-weight-bold: 800;

// ------ Colors 颜色 ------------
$primary-color: var(--color-primary) !default;
$info-color: var(--color-info) !default;
$success-color: var(--color-success) !default;
$warn-color: var(--color-warn) !default;
$error-color: var(--color-error) !default;

$primary-color3: var(--color-primary3);
$primary-color6: var(--color-primary6);
$primary-color10: var(--color-primary10);
$disabled-color: var(--color-disabled);
$disabled-color2: var(--color-disabled2);

$warn-color9: var(--color-warn9);
$success-color9: var(--color-success9);

$primary-disabled-color: var(--color-primary5);

$black: var(--color-black) !default;
$white: var(--color-white) !default;

// ------ Background Color 背景 -----
// 全局背景色，pc移动端一致，另外评论框，评论，附件，语音，模块与模块之间的间距背景色也是
$body-bg-color: var(--background-color);

// ------ text color -------
$text-color-primary: var(--color-text-primary);
$text-color-regular: var(--color-text-regular);
$text-color-secondary: var(--color-text-secondary);
// border hover 的颜色还有 loading 文字和这个一致
$text-color-placeholder: var(--color-text-placeholder);

$text-color-primary-color: $primary-color;
$text-color-error: $error-color;

$text-bg-color: var(--background-color-text);
// 灰色标签（编辑器付费、红包设置之后的显示的背景色），灰色按钮（取消）背景色
$text-bg-color2: var(--background-color-text2);

// ------ icon color ------------
$icon-color-light: $text-color-secondary;
$icon-color: $text-color-regular;
$icon-color-active: $primary-color;
$icon-primary-color: $primary-color;
$icon-success-color: $success-color;

// ----- boder color ----
$border-color: var(--border-line-color);
$border-color-hover: $text-color-placeholder;

// ---- border shadow color ----
$border-shadow-color: var(--shadow-color);
$border-shadow-color2: var(--shadow-color2);
$shadow-color: 0 0 8px $border-shadow-color;
$shadow-color2: 0 0 8px var(--shadow-color2);

$border-shadow-color-8: 0 0 8px 0 var(--shadow-color2);

// ---- mask color ----
$mask-bg-color: var(--mask-background-color);

// ---- loading color ----
$loading-text-color: $text-color-placeholder;

// ---- tag color： 悬赏、付费 ------
$tag-text-color1: var(--color-orange);
$tag-text-color2: $warn-color;
$tag-text-color3: $success-color;

$tag-info-bg-color: $text-bg-color2;
$tag-primary-lighter-color: $primary-color10;

// ---- comment color ----
$comment-bg-color: $body-bg-color;

// ---- link color ----
$link-text-color: $primary-color;

// ---- button color ----
$button-info-bg-color: $text-bg-color2;
$button-primary-bg-color: $primary-color;
$button-primary-light-bg-color: $primary-color10;
$button-primary-disabled-bg-color: $primary-disabled-color;
// 关闭按钮背景，小程序顶部胶囊按钮背景
$button-close-bg: var(--color-primary20);
$button-capsule-bg: var(--color-primary20);

// ----- checkbox color -----
$checkbox-checked-bg-color: var(--color-primary8);

// ------ border ----------
$border-radius-small: 5px;
$border-radius-big: 10px;
$border-radius-circle: 50%;
$border-radius-zero: 0;
$border-radius-8: 8px;

$border-solid-1: 1px solid $border-color;
$border-dotted-1: 1px dashed $border-color;

$border-solid-1-hover: 1px solid $border-color-hover;

// ------ spacer bg color -------
$spacer-bg-color: $body-bg-color;

// ------ spacer： 间距 padding & margin ----------

$padding-base: 4px;
$padding-1n: $padding-base;
$padding-2n: $padding-base * 2;
$padding-3n: $padding-base * 3;
$padding-4n: $padding-base * 4;
$padding-5n: $padding-base * 5;
$padding-6n: $padding-base * 6;
$padding-5: 5px;
$padding-10: 10px;
$padding-14: 14px;

$margin-base: 4px;
$margin-1n: $margin-base;
$margin-2n: $margin-base * 2;
$margin-3n: $margin-base * 3;
$margin-4n: $margin-base * 4;
$margin-5n: $margin-base * 5;
$margin-6n: $margin-base * 6;
$margin-5: 5px;
$margin-10: 10px;

// ------- z-index -----------
$zindex-normal: 0;
$zindex-backtotop: 1000;
$zindex-tooltip: 1200;
$zindex-popup: 1400;
$zindex-dialog: 1600;
$zindex-toast: 1800;

// ------  paybox ------------
$paybox-pay-text-font-size: 30px;
$paybox-border-line-color: var(--border-line-color);


$box-color-placeholder: var(--color-box-placeholder);

// ------ blockquote -----------
$blockquote-border: var(--border-color-blockquote);
$blockquote-text-color: var(--color-text-blockquote);
